<template>
  <div class="banner">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getBanner } from "@/assets/axios/api";
const images = ref([]);
onMounted(async () => {
  const res = await getBanner();
  images.value = res.data.banners;
});
</script>

<style scoped lang="less">
.banner {
  background-color: white;
  padding: 15px;
  padding-top: 50px;

  .van-swipe {
    width: 100%;
    height: 180px;
    border-radius: 20px;

    .van-swipe-item {
      img {
        width: 100%;
        height: 180px;
      }
    }

    :deep(.van-swipe__indicator--active) {
      background-color: red;
    }

    :deep(.van-swipe__indicator) {
      width: 10px;
      height: 2px;
      border-radius: 0;
    }
  }
}
</style>
